import React, { Component } from 'react'

export default class SearchInput extends Component {
  state = {
    value: '',
  }

  changeValueFn = (e) => {
    this.setState({
      value: e.target.value,
    })
  }

  search = () => {
    const { search } = this.props
    const { value } = this.state
    search && search(value.trim())
  }

  render() {
    const { value } = this.state
    const { placeholder, style = {}} = this.props
    return <div className="SearchInput common-search" style={{ ...style }}>
      <input ref={b => this.input = b}
        className="search-input"
        placeholder={placeholder}
        type="text"
        onKeyDown={(event) => {
          event.keyCode === 13 && this.search()
        }}
        value={value}
        autoComplete="off"
        onChange={this.changeValueFn}
      />
      <div className="search-btn">
        <img src={require('@/images/org/search.svg')} alt="" onClick={() => this.search()} />
      </div>
    </div>
  }
}
